<template>
 
  <div style="display: flex;justify-content: space-between;margin: 0 0 30px 0;">

    <div>
      <a-card hoverable style="width: 270px;height: 100px;">
        <div style="display: flex;">
          <div style="margin: 11px 15px 0 0;"> <span style="font-size: 30px;background-color: #007bff;color: #fff;padding: 5px;" class="iconfont icon-huabanfuben"></span></div>
          <div>
            <div style="font-size: 20px;"><b><a-statistic  :precision="2" :value="112893" /></b></div>
            <div style="font-size: 14px;color: rgb(150,150,150);margin: 8px 0 0 0;">总人数(个)</div>
          </div>
        </div>
      
       、
  </a-card>
    </div>
    <div>
      <a-card hoverable style="width: 270px;height: 100px;">
        <div style="display: flex;">
          <div style="margin: 9px 15px 0 0;"> <span style="font-size: 30px;background-color: #28a745;color: #fff;padding: 5px;" class="iconfont icon-zhuce"></span></div>
          <div>
            <div style="font-size: 20px;"><b>189</b></div>
            <div style="font-size: 14px;color: rgb(150,150,150);margin: 8px 0 0 0;">今天注册人数(个)</div>
          </div>
        </div>
      
       、
  </a-card>
    </div>
    <div>
      <a-card hoverable style="width: 270px;height: 100px;">
        <div style="display: flex;">
          <div style="margin: 9px 15px 0 0;"> <span style="font-size: 30px;background-color: #ffc107;color: #fff;padding: 5px;" class="iconfont icon-huoyuedu"></span></div>
          <div>
            <div style="font-size: 20px;"><b>1999</b></div>
            <div style="font-size: 14px;color: rgb(150,150,150);margin: 8px 0 0 0;">今天活跃度(个)</div>
          </div>
        </div>
      
       、
  </a-card>
    </div>
    <div>
      <a-card hoverable style="width: 270px;height: 100px;">
        <div style="display: flex;">
          <div style="margin: 9px 15px 0 0;"> <span style="font-size: 30px;background-color: #dc3545;color: #fff;padding: 5px;" class="iconfont icon-dengjizongshu"></span></div>
          <div>
            <div style="font-size: 20px;"><b>1129939</b></div>
            <div style="font-size: 14px;color: rgb(150,150,150);margin: 8px 0 0 0;">总数(个)</div>
          </div>
        </div>
      
       、
  </a-card>
    </div>
  </div>
  <div style="display: flex;justify-content: space-between;margin: 40px 0;">
    <div>
          <a-card hoverable style="border: none;z-index: 9999999;">
      <div style="width: 575px;border: 1px solid rgb(240,240,240);padding: 0 10px;">
        <div style="display: flex;justify-content: space-between;font-size: 14px;margin: 20px 0;">
          <div>今天文章最新数据</div>
          <div style="color: #007bff;">需要关注的数据及处理事项</div>
  
        </div>
    <div style="display: flex;width: 565px;padding: 0 0 20px 0;flex-wrap: wrap;">
      <div v-for="(item,q) in articles" :key="index" style="margin: 10px 5px 0 0;">
        <div class="bydw" @click="active(q)" :class="[index==q? 'actives':'']">
       
            <div style="font-size: 18px;">
              <b>{{ item.article_count }}</b>
            </div>
            <div style="font-size: 14px;">
             
              {{ item.nickname }}
            </div>
    </div>
      </div>
    </div>
  </div>
</a-card>
     <a-card hoverable style="border: none;margin: 10px 0 0 0;padding: 0;">
  <div style="width: 575px;border: 1px solid rgb(240,240,240);padding: 0 10px;margin: 20px 0 0 0;">
        <div style="display: flex;justify-content: space-between;font-size: 14px;margin: 20px 0;">
          <div>今天收藏最新数据</div>
          <div style="color: #007bff;">需要关注的数据及处理事项</div>
  
        </div>
    <div style="display: flex;width: 565px;padding: 0 0 10px 0;flex-wrap: wrap;">
      <div v-for="(item,q) in articless" :key="q">
        <div class="bydw" :class="[indexs==q? 'actives':'']" @click="actives(q)" style="margin: 10px 5px 0 0;">
       
            <div style="font-size: 18px;">
              <b>{{ item.fav_count }}</b>
            </div>
            <div style="font-size: 14px;">
             
              {{ item.nickname }}
            </div>
    </div>
      </div>
    </div>
  </div>
  </a-card>
  </div>
  
 <div style="text-align: center;">

 
   <a-card hoverable style="width: 570px;height: 320px;text-align: center; box-shadow: 0px 0px 5px 2px rgb(240,240,240);">
    <template #cover>
      <div style="width:560px;height: 300px;margin: 10px 5px;" id="qq">

</div>
    </template>
    <template #actions>
    
    </template>
    
  </a-card>
</div>
</div>
</template>
<script setup lang="ts">
import { number } from '_vue-types@3.0.2@vue-types';
import {echartsmethods,articles,articless} from './statis'
import {ref} from'vue'
echartsmethods()
let index=ref<number>(999)
  let indexs=ref<number>(999)

let {listdx}=echartsmethods()
function active(q:number){
  index.value=q
  

}
function actives(q:number){
  indexs.value=q
 

}
// import * as echarts from 'echarts';
// import {userstatistics} from '@/api/user/statistics'
// import { onBeforeMount,ref } from 'vue';
// import type { string } from '_vue-types@3.0.2@vue-types';
// let list=ref([])
// onBeforeMount(()=>{
//     userstatistics().then((res)=>{
//         console.log(res)
//         list.value=res.data
//         mz(res.data)
//     })
// })
// const mz=function (data:any){
//     let myChart =echarts.init( document.getElementById('qq') as HTMLElement,'dark');
//     // nickname.push(data)
//     let nickname:string[]=[]
//     let article_count:number[]=[]
//     let fav_count:number[]=[]
//     data.forEach((z:any) => {
//         nickname.push(z.nickname)
//         article_count.push(z.article_count)
//         fav_count.push(z.fav_count)
//     });
//     console.log(nickname,article_count,fav_count)
//     console.log(data)
//     console.log(myChart)
//     const labelOption = {
//   show: true,
//   position:'center',
//   distance: -30,
//   align: 'center',
//   verticalAlign: 'center',
//   rotate: 90,
//   formatter: '{c}  {name|{a}}',
//   fontSize: 16,
//   rich: {
//     name: {}
//   }
// };
//     let option;
            
// // myChart.setOption({
// //       series: [
// //         {
// //           label: labelOption
// //         },
// //         {
// //           label: labelOption
// //         },
       
// //       ]
// //     });
// option = {
//   xAxis: {
//     type: 'category',
//     data: nickname,
//     axisLabel:{
//         interval:0
//       }
//   },
//   yAxis: {
//     type: 'value'
//   },
//   toolbox: {
//     show: true,
//     orient: 'vertical',
//     left: 'right',
//     top: 'center',
//     feature: {
//       mark: { show: true },
//       dataView: { show: true, readOnly: false },
//       magicType: { show: true, type: ['line', 'bar', 'stack'] },
//       restore: { show: true },
//       saveAsImage: { show: true }
//     }
//   },
  
//   legend: {
//     data: ['文章数据', '收藏数据',]
//   },
//   series: [
//     {
  
//       data: article_count,
//       type: 'bar',
//       name: '文章数据',
//       label: labelOption,
//       emphasis: {
//         focus: 'series'
//       },
     
//     //   axisLabel:{
//     //     interval:-30
//     //   }
     
//     },
//     {
        
//   data: fav_count,
//   type: 'bar',
//   name: '收藏数据',
//   label: labelOption,
//   emphasis: {
//     focus: 'series'
//   },

// //   axisLabel:{
// //     interval:-30
// //   }
 
// }
//   ]
// };

// option && myChart.setOption(option);
// }
</script>
<!-- <script setup lang="ts">
import * as echarts from 'echarts';
function aa(){


let chartDom = document.getElementById('qq') as HTMLElement;
let myChart = echarts.init(chartDom);
let option; 

option = {
  title: {
    text: 'Stacked Area Chart'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};

option && myChart.setOption(option);
}
aa()
</script> -->
<style scoped>
.actives{
  background-color: rgb(220,220,220) !important;
}
.bydw {
  z-index: 1;
  position: relative;
  font-size: inherit;
  font-family: inherit;
  color: black;
 width: 135px;
 padding: 10px 0;
  outline: none;
  border: none;
  background-color: rgba(230,230,230,0.3);
  overflow: hidden;
  transition: color 0.4s ease-in-out;
  text-align: center;
}

.bydw::before {
  content: '';
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: rgb(220,220,220);
  transform-origin: center;
  transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
  transition: transform 0.45s ease-in-out;
}

.bydw:hover {
  cursor: pointer;
  color: #161616;
}

.bydw:hover::before {
  transform: translate3d(-50%, -50%, 0) scale3d(15, 15, 15);
}
</style>